<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0, maximum-scale=1.0, user-scalable=no">
    <title>我的生活记录</title>
    <link rel="stylesheet" href="styles.css">
    <!-- PWA 相关元信息 -->
    <link rel="manifest" href="manifest.json">
    <meta name="theme-color" content="#667eea">
    <meta name="description" content="记录美好生活的每一天">
    <meta name="apple-mobile-web-app-capable" content="yes">
    <meta name="apple-mobile-web-app-status-bar-style" content="black-translucent">
    <meta name="apple-mobile-web-app-title" content="生活记录">
    <!-- iOS 图标 -->
    <link rel="apple-touch-icon" href="icons/icon-192x192.svg">
    <!-- 预加载关键资源 -->
    <link rel="preload" href="styles.css" as="style">
    <link rel="preload" href="script.js" as="script">
</head>
<body>
    <header>
        <div class="container">
            <h1>我的生活记录</h1>
            <p>记录每一天的美好瞬间</p>
        </div>
    </header>

    <main>
        <section class="add-entry">
            <div class="container">
                <h2>添加新记录</h2>
                <form id="entryForm">
                    <div class="form-group">
                        <label for="title">标题</label>
                        <input type="text" id="title" placeholder="记录的标题" required>
                    </div>
                    <div class="form-group">
                        <label for="content">内容</label>
                        <textarea id="content" rows="5" placeholder="写下你的想法..." required></textarea>
                    </div>
                    <div class="form-group">
                        <label for="date">日期</label>
                        <input type="date" id="date" required>
                    </div>
                    <div class="form-group">
                        <label for="mood">心情</label>
                        <select id="mood" required>
                            <option value="">选择心情</option>
                            <option value="happy">开心</option>
                            <option value="excited">兴奋</option>
                            <option value="calm">平静</option>
                            <option value="sad">难过</option>
                            <option value="tired">疲惫</option>
                        </select>
                    </div>
                    <button type="submit" class="btn btn-primary">保存记录</button>
                </form>
            </div>
        </section>

        <section class="entries">
            <div class="container">
                <h2>生活记录</h2>
                <div class="search-filter">
                    <input type="text" id="searchInput" placeholder="搜索记录...">
                    <select id="filterMood">
                        <option value="">所有心情</option>
                        <option value="happy">开心</option>
                        <option value="excited">兴奋</option>
                        <option value="calm">平静</option>
                        <option value="sad">难过</option>
                        <option value="tired">疲惫</option>
                    </select>
                </div>
                <div id="entriesList" class="entries-grid">
                    <!-- 记录列表将通过JavaScript动态生成 -->
                </div>
            </div>
        </section>
    </main>

    <footer>
        <div class="container">
            <p>&copy; 2024 我的生活记录. 记录美好生活的每一天.</p>
        </div>
    </footer>

    <script src="script.js"></script>
    <!-- 注册 Service Worker 以支持 PWA 功能 -->
    <script>
      if ('serviceWorker' in navigator) {
        window.addEventListener('load', () => {
          navigator.serviceWorker.register('./sw.js')
            .then((registration) => {
              console.log('ServiceWorker 注册成功，作用域为: ', registration.scope);
            })
            .catch((error) => {
              console.log('ServiceWorker 注册失败: ', error);
            });
        });

        // 检测是否需要更新 Service Worker
        let refreshing = false;
        navigator.serviceWorker.addEventListener('controllerchange', () => {
          if (refreshing) return;
          refreshing = true;
          window.location.reload();
        });
      }

      // 检测URL参数，支持从快捷方式直接打开添加记录页面
      document.addEventListener('DOMContentLoaded', () => {
        const urlParams = new URLSearchParams(window.location.search);
        if (urlParams.get('action') === 'new') {
          const addEntrySection = document.querySelector('.add-entry');
          if (addEntrySection) {
            addEntrySection.scrollIntoView({ behavior: 'smooth' });
          }
        }
      });
    </script>
</body>
</html>